JavaScript Array Method

In the previous tutorial, we learned about JavaScript arrays and how to define them using square bracket notation and Array() object. We also learned that Array is a special JS object, and like other objects Array also comes with some inbuilt methods and properties. And in this tutorial, we will learn some of the most important Array methods and properties.

Find the JS array length

Array supports the length property that returns the total number of elements present in the array.

Syntax

array_name.length

Example

<script>
    let array0 = []; //empty array
    let array1= ["Ravi", "Rahul"];
    let array2 = [true, false, 0,1, "zero",  "one"]

    console.log(array0.length );  //0
    console.log(array1.length );  //2
    console.log(array2.length)     // 6
</script>

Convert JS array to string

With the help of toString() method, we can convert an array to a comma-separated string.

Syntax

array_name.toString()

Example

<script>
    let array= ["Ravi", "Rahul", "Rohan"];
    console.log(array.toString() );  // Ravi,Rahul,Rohan
</script>

JS also supports the join() method that joins all the array elements as a string with a specified separator.

Syntax

array_name.join(separator)

Example

<script>
    let array= ["Ravi", "Rahul", "Rohan"];

    console.log(array.join("-") );  //Ravi-Rahul-Rohan
    console.log(array.join("*"));   //Ravi*Rahul*Rohan
</script>

Pushing and Popping Elements

While working with the array, we came across the cases where we want to add and remove elements between the array.

pop() method

Using the pop() method we can remove the last element from the array. The pop() method not only removes the last element but also returns it.

Syntax

array_name.pop()

Example

<script>
    let array= ["Ravi", "Rahul", "Rohan"];
    popped = array.pop();
    console.log( popped);   //Rohan  
    console.log(array);      //["Ravi", "Rahul"]
</script>

push() method

The push() method is used to add new elements at the last of the array.

Syntax

array_name.push(new_element)

Example

<script>
    let array= ["Ravi", "Rahul", "Rohan"];
    popped = array.push("Rakesh");  
    console.log(array);     //["Ravi", "Rahul", "Rohan", "Rakesh"]
</script>

shift() method

The shift() shift all the elements of the array to one index toward the left and remove the first value.

Syntax

array_name.shift()

Example

<script>
    let array= ["Ravi", "Rahul", "Rohan"];
    removed = array.shift(); 
    console.log(removed)   //Ravi
    console.log(array);     //["Rahul", "Rohan"]
</script>

unshift() method

The unshift() method is used to add a new element at the beginning of the array.

Syntax

array_name.unshift()

Example

<script>
    let array= ["Ravi", "Rahul", "Rohan"];
    removed = array.unshift("Rakesh"); 
    console.log(array);    //["Rakesh", "Ravi", "Rahul", "Rohan"]
</script>

Delete an element from the array

To delete an element from the array we can use the delete keyword.

Syntax

delete array_name[index]

Example

<script>
    let array= ["Ravi", "Rahul", "Rohan"];
    delete array[0] ;   // delete first element 

    console.log(array);     //[empty, "Rahul", "Rohan"]
</script>

JS array splice() method

The splice() method is used to add and remove elements from the array at the same time.

Syntax

array_name.splice(insert_index, delete_element, new_values1, new_value2)

The splice() method can accept 3. insert_index represent the starting index value from where the new elements should be inserted. delete_elements represent the number of elements that should be deleted, after the specified index value. The rest of the parameters new_value1 , new_value2 represent the new values that should be added to the array.

Example

<script>
    let array= ["Ravi", "Rahul", "Rohan"];
    removed = array.splice(1, 0, "new value1", "new value2");
    console.log(array);     //["Ravi", "new value1", "new value2", "Rahul", "Rohan"]
</script>

Merge two arrays in JavaScript

To add/merge or concatenate two arrays we can use the array concat() method.

Syntax

array_name1.concat(array_name2);

Example

<script>
    let sectionA =["Ravi", "Rahul", "John"];
    let sectionB = ["Rahul", "Rohan", "kate"]

    let all_students = sectionA.concat(sectionB); //merge sectionA and sectionB
    console.log(all_students); //["Ravi", "Rahul", "John", "Rahul", "Rohan", "kate"]
</script>

JS Array Slicing

The slice() method is used to slice out a subarray from an array. The slice() method does not remove any element from the array, it just returns a new subarray of the existing array.

Syntax

array_name.slice(start_index, end_index)

The slice method can accept two optional parameters. start_index represent the starting index point from where the slicing should start. end_index represent the end index point up to which the slicing should perform. The end_index point is excluded, which means the ending index value does not slice. both the parameters start_index and end_index are optional, by default their value is 0 and n-1 (n is the total number of elements present in the array) respectively.

Example

<script>
    let studnets =["Ravi", "Rahul", "John", "Rohan", "Smith"];
    console.log(studnets.slice(1,3));  // ["Rahul", "John"]
    console.log(studnets.slice(2));    //["John", "Rohan", "Smith"]
</script>

Summary

These are some of the most important array methods that we often used while working with JS array. There are many other methods supported by the JS array that we will discuss in further tutorials, it is impossible to learn every method and property supported by an individual data structure or data type, but with practice, we came across the important ones.